
/**
 * 用touch事件模拟点击、左滑、右滑、上拉、下拉等时间，
 * 是利用touchstart和touchend两个事件发生的位置来确定是什么操作。
 * 例如：
 * 1、touchstart和touchend两个事件的位置基本一致，也就是没发生位移，那么可以确定用户是想点击按钮等。
 * 2、touchend在touchstart正左侧，说明用户是向左滑动的。
 * 利用上面的原理，可以模拟移动端的各类事件。
 **/
const EventUtil = (function () {
    //支持事件列表
    let eventArr = ['eventswipeleft', 'eventswiperight', 'eventslideup', 'eventslidedown', 'eventclick', 'eventlongpress'];

    //touchstart事件，delta记录开始触摸位置
    function touchStart(event) {
        this.delta = {};
        this.delta.x = event.touches[0].pageX;
        this.delta.y = event.touches[0].pageY;
        this.delta.time = new Date().getTime();
    }

    /**
     * touchend事件，计算两个事件之间的位移量
     * 1、如果位移量很小或没有位移，看做点击事件
     * 2、如果位移量较大，x大于y，可以看做平移，x>0,向右滑，反之向左滑。
     * 3、如果位移量较大，x小于y，看做上下移动，y>0,向下滑，反之向上滑
     * 这样就模拟的移动端几个常见的时间。
     * */
    function touchEnd(event) {
        let delta = this.delta;
        delete this.delta;
        let timegap = new Date().getTime() - delta.time;
        delta.x -= event.changedTouches[0].pageX;
        delta.y -= event.changedTouches[0].pageY;
        if (Math.abs(delta.x) < 5 && Math.abs(delta.y) < 5) {
            if (timegap < 1000) {
                if (this['eventclick']) {
                    this['eventclick'].map(function (fn) {
                        fn(event);
                    });
                }
            } else {
                if (this['eventlongpress']) {
                    this['eventlongpress'].map(function (fn) {
                        fn(event);
                    });
                }
            }
            return;
        }
        if (Math.abs(delta.x) > Math.abs(delta.y)) {
            if (delta.x > 0) {
                if (this['eventswipeleft']) {
                    this['eventswipeleft'].map(function (fn) {
                        fn(event);
                    });
                }
            } else {
                this['eventswiperight'].map(function (fn) {
                    fn(event);
                });
            }
        } else {
            if (delta.y > 0) {
                if (this['eventslidedown']) {
                    this['eventslidedown'].map(function (fn) {
                        fn(event);
                    });
                }
            } else {
                this['eventslideup'].map(function (fn) {
                    fn(event);
                });
            }
        }
    }

    function bindEvent(dom, type, callback) {
        if (!dom) {
            console.error('dom is null or undefined');
        }
        let flag = eventArr.some(key => dom[key]);
        if (!flag) {
            dom.addEventListener('touchstart', touchStart);
            dom.addEventListener('touchend', touchEnd);
        }
        if (!dom['event' + type]) {
            dom['event' + type] = [];
        }
        dom['event' + type].push(callback);
    }

    function removeEvent(dom, type, callback) {
        if (dom['event' + type]) {
            for (let i = 0; i < dom['event' + type].length; i++) {
                if (dom['event' + type][i] === callback) {
                    dom['event' + type].splice(i, 1);
                    i--;
                }
            }
            if (dom['event' + type] && dom['event' + type].length === 0) {
                delete dom['event' + type];
                let flag = eventArr.every(key => !dom[key]);
                if (flag) {
                    dom.removeEventListener('touchstart', touchStart);
                    dom.removeEventListener('touchend', touchEnd);
                }
            }
        }
    }
    return {
        bindEvent,
        removeEvent
    }
})();
